<template>
    <div style="width: 1280px; margin: auto;">
        <el-row class="weather_select">
            <!-- <el-form ref="formRef" :model="weather">
                <el-form-item prop="weather_city" :rules="[{
                                required: true,
                                message: '查询城市不能为空',
                                trigger: 'blur',
                            }]">
                    <el-input v-model="weather.weather_city" size="large" placeholder="查询城市天气预报" />
                    <span>
                        <el-button class="weather_btn" type="primary" :icon="Search">
                        </el-button>
                    </span>
                </el-form-item>
            </el-form> -->
        </el-row>
        <h1>{{ weather_data.lives.city }}天气预报</h1>
        <div style="color: #73767a; font-size: 15px; padding-top: 15px;">查询时间：{{ weather_data.lives.reporttime }}</div>
        <el-row style="padding-top: 15px;">
            <el-col :span="2" style="font-size: 52px;">
                {{ weather_data.lives.temperature }}℃
            </el-col>
            <el-col :span="2" class="dayweather">
                {{ weather_data.lives.weather }}
            </el-col>
            <el-col :span="15" class="daywind">
                <heavy-wind theme="outline" size="24" fill="#000000" />
                {{ weather_data.lives.winddirection }}风
                <span>{{ weather_data.lives.windpower }}级</span>
            </el-col>
            <el-col :span="4">
                <img v-if="weather_data.lives.weather == '晴'" class="weather_img" src="../../assets/weather/晴天.png">
                <img v-else-if="weather_data.lives.weather == '少云' || '晴间多云' || '多云'" class="weather_img"
                    src="../../assets/weather/多云.png">
                <img v-else-if="weather_data.lives.weather == '阴' || '平静'" class="weather_img"
                    src="../../assets/weather/阴天.png">
                <img v-else-if="weather_data.lives.weather == '雾' || '浓雾' || '强浓雾' || '轻雾' || '大雾' || '特强浓雾'"
                    class="weather_img" src="../../assets/weather/雾.png">
                <img v-else-if="weather_data.lives.weather == '雷阵雨' || '雷阵雨并伴有冰雹'" class="weather_img"
                    src="../../assets/weather/雷阵雨.png">
                <img v-else-if="weather_data.lives.weather == '小雨' || '雨' || '小雨-中雨' || '毛毛雨/细雨'" class="weather_img"
                    src="../../assets/weather/小雨.png">
                <img v-else-if="weather_data.lives.weather == '中雨' || '中雨-大雨'" class="weather_img"
                    src="../../assets/weather/中雨.png">
                <img v-else-if="weather_data.lives.weather == '大雨' || '大雨-暴雨' || '暴雨-大暴雨' || '大暴雨-特大暴雨'"
                    class="weather_img" src="../../assets/weather/大雨.png">
                <img v-else-if="weather_data.lives.weather == '雪' || '阵雪' || '小雪' || '中雪' || '大雪' || '暴雪' || '小雪-中雪' || '中雪-大雪' || '大雪-暴雪'"
                    class="weather_img" src="../../assets/weather/雪天.png">
                <img v-else-if="weather_data.lives.weather == '有风' || '微风' || '和风' || '清风' || '浮尘'" class="weather_img"
                    src="../../assets/weather/小风1.png">
                <img v-else-if="weather_data.lives.weather == '强风/劲风' || '疾风' || '大风' || '烈风' || '风暴' || '狂爆风' || '飓风' || '热带风暴' || '龙卷风'"
                    class="weather_img" src="../../assets/weather/大风.png">
                <img v-else-if="weather_data.lives.weather == '霾' || '中度霾' || '重度霾' || '严重霾'"
                    src="../../assets/weather/雾霾.png" class="weather_img">
                <img v-else-if="weather_data.lives.weather == '沙尘暴' || '强沙尘暴' || '扬沙'"
                    src="../../assets/weather/沙尘暴.png" class="weather_img">
                <img v-else src="../../assets/weather/未知天气.png" class="weather_img">
            </el-col>
        </el-row>
        <el-row style="font-size: 22px;">
            {{ weather_data.ganmao}}
        </el-row>
        <!--  -->
        <el-row class="future">
            <el-col v-for="(item, index) in weather_data.data.casts" :key="index" :span="7" v-show="index != 0"
                class="future_weather">
                <div style="font-size: 40px;margin-top: 30px;">{{ item.dayweather }}</div>
                <div style="font-size: 18px;margin-top: 15px;">{{ item.nighttemp }}℃~{{ item.daytemp }}℃</div>
                <div style="font-size: 20px;margin-top: 15px;">
                    <calendar theme="outline" size="20" fill="#000000" />{{ item.date }}
                </div>
                <div style="font-size: 20px;margin-top: 15px;">
                    <heavy-wind theme="outline" size="20" fill="#000000" />
                    {{ item.daywind }}风
                    <span>{{ item.daypower }}级</span>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { Log, Calendar, HeavyWind, Search } from "@icon-park/vue-next";
import { reactive, ref, getCurrentInstance, watchEffect, onMounted } from "vue";

const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const weather = reactive({
    weather_city:''
})
const weather_data = reactive({
    data: [],
    lives: [],
    ganmao:[]
})
let weather_city = ref()
//获取预报天气
const getWeatherAll = () => {
    proxy.$http({
        method: "get",
        url: "https://restapi.amap.com/v3/weather/weatherInfo?key=5eb5eec38fc8dbab2ee50dee9a719ad9&extensions=all&city=" + weather_city.value
    }).then((res) => {
        weather_data.data = res.data.forecasts[0]
    })
}
// 获取实况天气
const getWeatherBase = () => {
    proxy.$http({
        method: "get",
        url: "https://restapi.amap.com/v3/weather/weatherInfo?key=8fc119ba9b115acd8a4b75b3c55106df&extensions=base&city=" + weather_city.value
    }).then((res) => {
        weather_data.lives = res.data.lives[0]
    })
}
// http://wthrcdn.etouch.cn/weather_mini?city=%E5%8C%97%E4%BA%AC
const getGanmao = () => {
    proxy.$http({
        method: "get",
        url: "http://wthrcdn.etouch.cn/weather_mini?city=" + weather_city.value
    }).then((res) => {
        weather_data.ganmao = res.data.data.ganmao
    })
}

watchEffect(() => {
    // 接收路由参数
    weather_city.value = route.query.weather_city
    // 加载数据
    getWeatherBase()
    getWeatherAll()
    getGanmao()
})
</script>

<style scoped>



.weather_select{
    width: 500px;
    padding-top: 120px;
    margin: auto;
}
.weather_btn{
    margin-top: 0px;
    font-size: 20px;
    height: 40px;
    width: 55px;
}
.dayweather{
    font-size: 24px;
    margin-top: 24px;
    margin-left: 20px;
}
.daywind{
    font-size: 20px;
    margin-top: 28px;
    margin-left: -10px;
}
.weather_img{
    width: 180px;
    height: 160px;
    margin-top: -70px;
}
/* 未来三天天气 */
.future{
    width: 1280px;
    height: 300px;
    margin: auto;
    margin-top: 50px;
    margin-left: -13px;
}
.future_weather{
    text-align: center;
    padding: 5px;
    margin:12px;
    background-color: #FFFFFF;
    box-shadow: var(--el-box-shadow-lighter);
    border-radius: 15px;
}
.future_weather:hover{
    background-color: #F5F7FA;
}
</style>
